

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <title>酷代码-专业的源代码分享网站</title>
    <meta name="baidu-site-verification" content="code-xEvBW4PmsD" />
    <meta name="keywords" content="{:keywords}" />
    <meta name="description" content="酷代码,专业的源代码分享网站,聚合高质量的java/jquery/bootstrap/html/css/php/python源代码" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="{:jquery}"></script>
    <link href="{:bootstrap_min_css}" rel="stylesheet">
    <script src="{:bootstrap_min_js}"></script>
    <link rel="stylesheet" href="/min/?g=css&v={:version}">
    <style>
        .tips div{
            background-color: #b0e5ff;
            padding: 8px;
            margin-bottom: 9px;
            border-radius: 8px;
            color: #004073;
        }
        .w-e-text-container{
            height: 500px!important;
        }
        .ilabel{
            color: #E45A84;
            margin-top: 10px;
        }
        #file{
            margin-bottom: 18px;
        }
        #tags{
            border: 1px solid #ccc;
            padding: 6px 8px;
            height: 44px;
        }
        #tags .txt{
            border: 0px;
            outline: none;
            margin-top: 4px;
        }
        .i-tag{
            background-color: #dddddd;
            padding: 2px 8px;
            display: inline-block;
            color: #333333;
            margin-right: 5px;
        }
        .i-tag .gban{
            cursor: pointer;
            color: #666666;
        }
        .iform label{
            color: #d05351;
        }

        .code-block:hover pre{
            border: 1px solid #0065B5;
            box-sizing: border-box;
        }
    </style>
</head>
<body>

{include file="inc/header" /}


<div class="container">

    <div class="row">
        <div class="col-md-9 ecol">
            <div class="panel panel-default">
                <div class="panel-heading xzpb">
                    <ol class="breadcrumb">
                        <li><a href="/">酷代码</a></li>
                        <li><a href="/code.html">项目</a></li>
                        <li class="active">编辑</li>
                    </ol>

                </div>
                <div class="panel-body">

                    <form class="iform" id="form1" action="/api/share/save" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="project_id" value="{$project.id}">
                        <div class="form-group">
                            <label>语言</label>
                            <select class="form-control" style="width: 200px" name="category">
                                {volist name="langs" id="la"}
                                <option value="{$la.id}" {$project.category.id==$la.id?'selected':''}>{$la.name}</option>
                                {/volist}
                            </select>
                        </div>
                        <div class="form-group">
                            <label>标题</label>
                            <input id="title" type="text" class="form-control" name="title" value="{$project.name}" placeholder="请输入项目标题">
                        </div>
                        <div class="form-group">
                            <label>描述</label>
                            <div id="edtbox" style="display: none">
                                {$project.content|raw}
                            </div>
                            <p class="help-block">图片不能超过1M限制，后缀名支持 jpg,png,gif,jpeg,bmp,webp </p>
                        </div>
                        <div class="form-group">
                            <label>代码文件（非必须）</label>
                            <input id="file" type="file" name="file" accept="">
                            <p class="help-block">不选文件代表不修改.</p>
                        </div>
                        <div class="form-group">
                            <label>标签</label>
                            <div id="tags">
                                {volist name="project.tags" id="t"}
                                <div class="i-tag">
                                    {$t.name}
                                    <span class="glyphicon glyphicon-remove gban" onclick="$(this).parent().remove();"></span>
                                    <input type="hidden" name="tag[]" value="{$t.name}">
                                </div>
                                {/volist}
                                <input type="text" class="txt" placeholder="请输入标签">
                            </div>
                        </div>
                        <div style="padding: 20px">
                            <input type="radio" name="status" value="0" {$project.status==0?'checked':''}>未审核</input>
                            <input type="radio" name="status" value="1" {$project.status==1?'checked':''}>审核通过</input>
                            <input type="radio" name="status" value="2" {$project.status==2?'checked':''}>审核失败</input>
                        </div>
                        <button id="btn3" type="button" class="btn btn-danger">确认修改</button>
                    </form>


                </div>

            </div>
        </div>
        <div class="col-md-3 ecol">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">规则与说明</h3>
                </div>
                <div class="panel-body">
                    <div class="tips">
                        <div>必须有项目截图，否则不通过</div>
                        <div>必须有运行截图，否则不通过</div>
                        <div>项目截图+1硬币</div>
                        <div>运行截图+1到3硬币</div>
                        <div>提供运行视频+1到10硬币,并且可以提高审核速度，免费录屏软件<a href="https://www.ieway.cn/evcapture.html" target="_blank">https://www.ieway.cn/evcapture.html</a></div>
                        <div>原创+2硬币,冒充原创封号30天</div>
                        <div>高质量代码+1到10硬币</div>
                        <div>丰富的描述+1到10硬币(用到的技术框架，使用心得，注意事项等)</div>
                        <div>代码上传后不可要求删除,有版权纠纷的例外。</div>
                        <div>硬币数由官方统一设置</div>
                    </div>
                    <div>
                        代码上传时去掉多余文件，如java项目中的bin目录，javaweb项目中的classes目录，
                        上传文件必须小于20M以内
                    </div>
                    <div>
                        代码尽量以maven工程来组织,如果不会用maven工程，在txt中列举所用jar包也可以，或者提供jar包的网盘下载地址（百度网盘，天翼网盘，阿里云盘，蓝奏云盘）
                    </div>
                    <div>maven依赖包查找地址 <a href="http://mvnrepository.com/" target="_blank">http://mvnrepository.com/</a></div>
                    <div>jar包查找地址 <a href="http://www.findjar.com" target="_blank">http://www.findjar.com</a></div>

                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
    </div>
</div>

<script id="tpl1" type="text/html">
<div class="i-tag">
    {{text}}
    <span class="glyphicon glyphicon-remove gban" onclick="$(this).parent().remove();"></span>
    <input type="hidden" name="tag[]" value="{{text}}">
</div>
</script>

<script id="tpl2" type="text/html">
    <div class="progress" style="margin: 10px">
      <div class="progress-bar progress-bar-striped active upload-progresbar" role="progressbar" style="width: 0%">
          0%
      </div>
    </div>
</script>


<!--<script type="text/javascript" src="https://unpkg.com/wangeditor/dist/wangEditor.min.js"></script>-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.min.js"></script>
<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/styles/vs.min.css" rel="stylesheet">
<script src="/js/cctpl.js"></script>
<script>
    $(function () {
        window.onbeforeunload = function(){
            return "quit?";
        }

    })

    function remove(arr, obj) {
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] == obj) {
                arr.splice(i, 1);
            }
        }
    }

    $.fn.serializeToJson = function()
    {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
    $(function () {

        var ticket = "{:session('publish_ticket')}"; //提交凭据，每次刷新页面都会更新，为了防止页面重复提交

        var E = window.wangEditor;
        var editor = new E('#edtbox');
        //editor.highlight = hljs;
        editor.config.uploadImgServer = '/upload/image';
        editor.config.uploadFileName = 'image'
        editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
        editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'jfif']

        editor.config.onchangeTimeout=10;
        var ces = editor.txt.eventHooks.changeEvents;

        var handler = function(newHtml) {
            //console.log("change 之后最新的 html", newHtml);
            remove(ces, handler);
            var txt = editor.$textElem.elems[0];
            $(txt).find('pre').each(function () {
                var pre = $(this);
                if (!pre.parent().hasClass('code-block')) {
                    var block = $('<div class="code-block" contenteditable="false" tabindex="1"></div>').html(pre.clone());
                    block.keydown(function (e){
                        e.stopPropagation();
                        console.log(e.keyCode)
                        if (e.keyCode == 46) {
                            $(this).remove();
                        }
                    });
                    pre.replaceWith(block);
                }
            })
            setTimeout(function () {
                ces.push(handler);
            }, editor.config.onchangeTimeout + 100);
        };
        ces.push(handler);


        $('#edtbox').show();

        editor.config.uploadImgHooks.customInsert=function(insertImgFn, result) {
            // result 是服务端返回的接口数据
            //console.log(result)
            // insertImgFn 可把图片插入到编辑器，传入图片 src,alt,href
            if (result.errno == 0) {
                var arr = result.data;
                for (var i = 0; i < arr.length; i++) {
                    var info = arr[i];
                    insertImgFn(info.url, info['alt'], info['href']);
                }
            }else{
                layer.alert(result.msg, {icon: 5});
            }

        }
        /*editor.config.uploadImgHooks.fail=function(xhr, editor, resData) {
            console.log('fail', resData)
        }*/
/*
        $.ajax({
            url:'/api/project/info/'+{$project.id},
            type:'post',
            //data:formData,
            dataType:'json',
            success: function (data) {
                data = JSON.parse(data);
                console.log(data)
                var content = data.data.content;
                //content = content.replace(/<xmp><br(.*?)><\/xmp>/g,'<xmp>\n</xmp>');
                var node = $('<div></div>').html(content);
                editor.txt.html(content);
            },
            complete: function() {

            },
        });*/


        editor.config.menus = [
            //'head',
            'bold',
            'fontSize',
            'fontName',
            'italic',
            'underline',
            'strikeThrough',
            //'indent',
            //'lineHeight',
            'foreColor',
            'backColor',
            'link',
            'list',
            //'todo',
            'justify',
            'quote',
            //'emoticon',
            'image',
            'video',
            'table',
            'code',
            'splitLine',
            //'undo',
            //'redo',
        ]

        editor.create();
        handler();

        editor.txt.eventHooks.codeClickEvents.push(function (e) {
            console.log(e.elems[0])
        });

        $('#tags .txt').keydown(function (e) {
            var that = $(this);
            var val = e.target.value;

            if (e.keyCode == 13||e.keyCode==32) { //回车
                setTimeout(function () {
                    that.val('');
                },1);
                if (val.trim().length == 0) {
                    return;
                }
                var html=cctpl.render($('#tpl1').html(),{text:val});
                var obj=$(html);
                obj.insertBefore(that);
            }
        });
        //提交订单
        $('#btn3').click(function () {

            var content = editor.txt.html().trim();
            var node = $('<div></div>').html(content);
            node.find('.code-block').each(function () {
                var block = $(this);
                var pre = block.find('pre');
                block.replaceWith(pre);
            });
            content = node.html();

            //if (true)return;

            if ($('#title').val().trim() == '' || content == '') {
                layer.alert('标题与内容不可为空',{icon:0});
                return;
            }

            var files = document.getElementById('file').files;
            if (files.length > 0) {
                if (files[0].size > 10485760) {
                    layer.alert('文件超出10M限制，无法上传');
                    return;
                }
                var idx = layer.open({
                    type: 1,
                    title:'正在提交，请稍候...',
                    area: ['450px', '150px'], //宽高
                    content: $('#tpl2').html()
                });
            }


            var formData = new FormData(document.getElementById('form1'));
            formData.append('content', content);
            formData.append('ticket', ticket);
            $.ajax({
                url:'/api/project/update',
                type:'post',
                data:formData,
                dataType:'json',
                contentType:false,
                processData:false,
                cache: false,
                xhr: function() {
                    var xhr = new XMLHttpRequest();
                    //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
                    xhr.upload.addEventListener('progress', function (e) {
                        console.log(e);
                        //loaded代表上传了多少
                        //total代表总数为多少
                        var rate = parseInt((e.loaded / e.total) * 100);
                        if (rate>=99)rate=99;
                        //通过设置进度条的宽度达到效果
                        $('.upload-progresbar').css('width', rate+'%').html(rate+'%');
                    })
                    return xhr;
                },
                success: function (data) {
                    data = JSON.parse(data);
                    console.log(data)
                    $('.upload-progresbar').css('width', '100%').html('100%');
                    if (data.code != 0) {
                        layer.alert(data.msg,{icon:5});
                    }else{
                        //发布成功
                        layer.alert(data.msg);
                        //window.location.reload();
                    }

                },
                complete: function() {
                    //请求完成的处理
                    //layer.close(idx);
                    setTimeout(function () {
                        layer.close(idx);
                    },500);
                },
            });

        });

    });
    window.onbeforeunload = function(){
        if (false) {
            return "quit?";
        }

    }
</script>

{include file="inc/footer" /}
</body>
</html>
